<template>
  <div class="drawerBackBg">
    <div v-if="showButton" class="drawerBackBox">
      <div @click="drawerBack">确 定 返 回</div>
    </div>
    <div v-else class="drawerBackBg" @click="drawerBack" />
  </div>
</template>
<script>
export default {
  name: 'SunSearch',
  props: {
    parent: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: String,
      default: ''
    },
    showButton: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    drawerBack() {
      console.log(this.show)
      this.parent[this.show] = false
    }
  }
}
</script>

<style lang="scss" scoped>
.drawerBackBg {
  height: 100%;position: fixed;left: 0;top: 0;z-index: 9999;width: 210px;
  .drawerBackBox{
    line-height: 36px;padding: 0 14px;position: absolute;bottom: 15%;right: 0;font-size: 12px;border-radius: 20px 0 0 20px;color: #FFFFFF;
    animation:visibility 3s;background: #409EFF;cursor:pointer;
  }
  @keyframes visibility {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    60% {
      opacity: 0.2;
    }
    70% {
      opacity: 0.4;
    }
    80% {
      opacity: 0.6;
    }
    90% {
      opacity: 0.8;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>
